<template>
    <div class="rootMain">
        <el-form label-position="right" label-width="90px">
            <el-form-item label="输入金额">
                <el-input v-model="oldTax"></el-input>
            </el-form-item>
            <el-form-item label="约定利率(%)">
                <el-input v-model="appointTax"></el-input>
            </el-form-item>
            <el-form-item label="起算日期">
                <el-date-picker
                    v-model="startDate"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="截止日期">
                <el-date-picker
                    v-model="endDate"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="倍率">
                <el-input v-model="multiple"></el-input>
            </el-form-item>
        </el-form>

        <div class="but">
            <el-button @click="resetBtn">重置</el-button>
            <el-button type="primary" @click="countBtn">计算</el-button>
        </div>

        <div v-if="resultShow" class="result">
            <el-descriptions title="计算结果：" :column="1">
                <el-descriptions-item
                    :label="`${getTime(startDate)}到${getTime(
                        endDate
                    )}之间共${overdueDays}天`"
                >
                </el-descriptions-item>
                <el-descriptions-item label="利息为：">
                    {{ taxcount }}元
                </el-descriptions-item>
            </el-descriptions>
            <div class="qumaohao">
                <el-descriptions title="计算公式： " :column="1">
                    <el-descriptions-item
                        label="利息 = (本金 x 年利率 x 天数 x 倍数)/365"
                    >
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
import { getTime2 } from "@/assets/utils/utils";
export default {
    name: "penalSum",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            getTime: getTime2,
            index: "",
            picker: [
                {
                    type: 0,
                    name: "日利率",
                },
                {
                    type: 1,
                    name: "月利率",
                },
                {
                    type: 2,
                    name: "年利率",
                },
            ],
            oldTax: "",
            startDate: new Date(),
            endDate: new Date(),
            newTax: 0,
            taxcount: 0,
            taxPercent: "",
            appointTax: "",
            multiple: 1,

            overdueDays: 0,
            resultShow: false,
        };
    },
    watch: {},
    created() {},
    mounted() {},
    computed: {},
    methods: {
        PickerChange(e) {
            console.log(e);
        },
        message(m) {
            this.$message({
                message: m,
                type: "warning",
            });
        },
        //重置
        resetBtn() {
            this.resultShow = false;
            this.oldTax = "";
            this.appointTax = "";
        },

        //计算
        countBtn() {
            if (this.oldTax == "") {
                this.message("请填写金额");
                return;
            }
            if (this.appointTax == "") {
                this.message("请填写约定利率");
                return;
            }
            const days = moment(this.endDate).diff(
                moment(this.startDate),
                "days"
            );
            this.overdueDays = moment(this.endDate).diff(
                moment(this.startDate),
                "days"
            );
            const a = this.appointTax / 100;
            const price = (this.oldTax * a * days * this.multiple) / 365;
            this.taxcount = price.toFixed(2);
            this.resultShow = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.rootMain {
    padding: 20px 22px;
}
.qumaohao {
    ::v-deep .el-descriptions-item__label.has-colon::after {
        content: "";
    }
}

.result {
    padding-top: 25px;
}
</style>
